<template>
	<view>
		<unitv-page id="playPage" :show="true" ref="playPage" class="page_box">
			<view class="movie-contain">
				<unitv-video class="player" :src="url" :autoplay="true" :is-live="true"
					@fullscreenchange="fullscreenchange" :title="title">
				</unitv-video>
			</view>
		</unitv-page>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				tvInfo: {},
				url: "",
				title: "",
				index: 0
			}
		},
		computed: {
			...mapState(["tvList"])
		},
		onLoad(params) {
			debugger
			let index = params.index;
			this.index = params.index * 1
			if (index || index === 0) {
				this.tvInfo = this.tvList[index]
				this.url = this.tvList[this.index] && this.tvList[this.index].url || ""
				let title = this.tvList[this.index] && this.tvList[this.index].title || ""
				let index = this.index + 1
				this.title = "频道" + index + "-" + title
			}
			uni.$on('keyDown', this.keyDownFun);
		},
		onReady() {
			this.viderContext = uni.createVideoContext("player");
			this.viderContext.requestFullScreen()
		},
		onUnload() {
			uni.$off("keyDown", this.keyDownFun)
		},
		created() {},
		filters: {},
		methods: {
			keyDownFun(data) {
				console.log(data)
				debugger
				if (data === "KeyUp") {
					this.preFun()
				}
				if (data === "KeyDown") {
					this.nextFun()
				}
			},
			fullscreenchange(e) {
				if (!e) {
					uni.navigateBack()
				}
			},
			preFun() {
				if (this.index <= 0) {
					this.index = this.tvList.length - 1;
				}
				this.index = this.index - 1;
				let title = this.tvList[this.index] && this.tvList[this.index].title || ""
				let index = this.index + 1
				this.title = "频道" + index + "-" + title
			},
			nextFun() {
				if (this.index >= this.tvList.length - 1) {
					this.index = 0;
				}
				this.index = this.index + 1;
				this.url = this.tvList[this.index] && this.tvList[this.index].url || "";
				let title = this.tvList[this.index] && this.tvList[this.index].title || ""
				let index = this.index + 1
				this.title = "频道" + index + "-" + title;
			}
		},
		watch: {
			url(val) {
				console.log("tv:" + this.index, this.url)
			}
		}
	}
</script>

<style scoped lang="scss">
	.movie-contain {
		width: 100vw;
		height: 100vh
	}

	.flex_box {
		position: fixed;
		top: 1px;
		left: 1px;
		background-color: red;
	}
</style>